import config from '@/views/tankGame/config';
import { getPositionCollection } from '@/views/tankGame/service/handlePosition';
import { imageMap, getImgTag, keyType } from '@/views/tankGame/service/handleImage';

export default abstract class canvasInit {
  protected canvasContainer: HTMLDivElement;
  protected canvas: HTMLCanvasElement;
  protected ctx: CanvasRenderingContext2D;

  constructor(protected canvasName: string) {
    this.canvasContainer = document.getElementById('canvasContainer')! as HTMLDivElement;
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d')!;
    this.createCanvas();
  }

  // 创建画布
  protected createCanvas() {
    this.canvas.setAttribute('name', this.canvasName);
    this.canvas.width = config.canvas.width;
    this.canvas.height = config.canvas.height;
    this.canvas.setAttribute('style', 'position: absolute;');
    this.canvasContainer.appendChild(this.canvas);
  }

  // 生成模型
  protected async createModel(image: keyType, num: number, isTank: boolean = false) {
    await Promise.all(getImgTag);
    getPositionCollection(num, isTank).forEach((position) => {
      this.ctx.drawImage(imageMap.get(image)!, position.x, position.y, config.model.width, config.model.height);
    });
  }
}
